<template>
      <div class="docker">
      <div v-for="(item,index) in dockerList" :key="item.icon"  :class="{'docker_item': true, 'docker_item_active': index === currentIndex}" >
        <router-link :to='item.to'>
        <div class="iconfont" v-html="item.icon"></div> 
        <div class="docker_title">{{item.text}}</div> 
        </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name:'Docker',
  props:['currentIndex'],
  setup(){
    const dockerList = [
      {icon: '&#xe7c6;', text: '首页', to: {name: 'Home'}},
      {icon: '&#xe713;', text: '订单', to: {name: 'OrderList'}},
      {icon: '&#xe78b;', text: '我的', to: {name: 'PersonalInfo'}},
    ]
    return { dockerList }
  }
}
</script>

<style lang="scss" scoped>
@import '../style/viriables';
@import '../style/mixin';
.docker{
  display: flex;
  position: absolute;
  box-sizing: border-box;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .49rem;
  border-top: .01rem solide $content-bgColor;
  &_item{
    flex: 1;
    text-align: center;
    a{
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont{
      margin: .07rem 0 .02rem 0;
      font-size: .2rem;
    }
    &_active{
      a{
        color: #1FA4FC;
      }
    }
  }
  &_title{
    font-size: .2rem;
    transform: scale(.5, .5);
    transform-origin:center top ;
  }
  &_item:hover{
    color: #1fa4fc
  }
}
</style>